Eleventy 静态站点生成器

Eleventy（11ty）是一款静态站点生成器。它可以从 Markdown 文件、JSON 文件或远程数据源中获取内容并处理，对数据进行整合，并与对应的模板整合，最终生成静态站点。

最初了解到它，源于我使用 Obsidian-Digital-Garden 为 0.0 Obsidian 介绍 笔记生成数字花园的时候，我发现支撑数字花园网站底层的静态生成器是 Eleventy。

Eleventy（11ty）以其简单性和灵活性闻名，因为它不强迫使用某一种模板语言或框架，而是提供了十多种模板语言的支持。

安装方式参见网络资源【1】，本文不再赘述。

高级主题

本文对 Eleventy 的基础概念进行介绍。如果希望详细了解，请参阅本节详细高级主题：

术语表

术语 解释
Template 模板 以 Markdown、HTML、Liquid、Nunjucks 等格式编写的内容文件，Eleventy 将其转换为构建网站中的一个或多个页面。模板可以使用模板语法访问通过 data cascade公开的数据。
Layout 布局 包裹另一个模板的模板，通常为要放置的内容提供脚手架（站点框架）标记。
Data 数据 通过可以在模板和布局中使用的模板语法使用的变量暴露。给定模板的数据通过一个称为数据级联（data cascade）的过程聚合。
Data Cascade 数据级联 Eleventy 评估任何给定模板的所有数据以及解决产生的冲突的操作顺序。数据级联遵循共置原则（colocation），因此广泛定义以适用于多个模板的数据将被针对给定模板更具体的数据所取代。
Filter 筛选 可以在模板语法中使用的函数，将数据转换为更美观的格式。过滤器通常设计为链接式，以便从一个过滤器返回的值通过管道传输到下一个过滤器。
Shortcode 短代码 可以在模板语法中使用的函数，将内容注入到模板中。短代码可以采用许多参数，并且可以被视为可重用标记的模板方法。
Collection 收藏 一组模板，用于对相似的内容进行分组。可以通过使用标签或调用 Eleventy 配置中的集合 API 来创建集合。
Pagination 分页 一种通过迭代数据来创建页面的方法。相同的模板应用于分页数据的每个块。
Plugin 插件 一个可移植、可安装的 Eleventy 配置，可以将数据、过滤器、短代码等添加到项目设置中。
Eleventy Edge 选择 Eleventy 的短代码，其中动态功能可以与构建生成的或无服务器模板相结合。
Eleventy Serverless 无服务器 Eleventy 的一种选择加入构建模式，其中指定的页面是在用户请求时构建的，而不是在构建步骤期间提前构建的。或者，内容交付网络可以缓存根据请求构建的页面，以供将来访问该页面时使用。

常用命令

命令 说明
npx @11ty/eleventy 构建
npx @11ty/eleventy --serve 本地预览
npx @11ty/eleventy --serve --port=8081 指定端口
npx @11ty/eleventy --watch 监视文件系统
自动构建

核心配置文件

项目根目录下的 .eleventy.js 作为配置文件。核心配置项：

配置 说明
input 指定项目文件的目录，推荐 src
output 建站点的输出目录，默认为 _site
templateFormats 模板格式，默认 .html、.njk、.md

示例：

module.exports = function (eleventyConfig) {
    return {
        dir: {
            input: 'src',
        },
    };
};

工程结构

├── node_modules/
├── public/
├── src/
     ├── _includes
     ├── layouts
     ├── assets
     ├── css
     ├── projects
     └── index.njk
├── .eleventy.js
├── .gitignore
├── package.lock.json
└── package.json

《Learn Eleventy From Scratch》课程中给出的工程结构，src 下的内容分类更加清晰：

src
├── images
├── people
├── posts
└── work

其中：src/index.md 即可表示首页。

主题样式

社区中提供大量主题，主要有两个来源：

.gitignore 样例

《Learn Eleventy From Scratch》课程中给出了一份 .gitignore 样例：

# Misc
*.log
npm-debug.*
*.scssc
*.swp
.DS_Store
Thumbs.db
.sass-cache
.env
.cache

# Node modules and output
node_modules
dist
src/_includes/css

网络资源

本文作者：Maeiee

本文链接：Eleventy 静态站点生成器

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！